<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style type="text/css">
			canvas{
				border: 1px solid #333;
			}
		</style>
	</head>
	<body>
		<!-- canvas画布的大小，不能用css来调整，用属性来调整 -->
		<canvas id="canvas" width="600" height="400"></canvas>
		
	</body>
	<script type="text/javascript">
		//获取画布
		let canvas=document.getElementById("canvas");
		//获取上下文
		let ctx=canvas.getContext("2d");
		
		
		//移动坐标系
		ctx.translate(300,200)
		
		//绘制大圆
		ctx.arc(0,0,200,0,Math.PI*2,false)
		
		//竖直向上
		ctx.moveTo(0,0)
		ctx.lineTo(0,-200)
		
		//右侧斜线
		let angle1=30*Math.PI/180
		let x1=200*Math.cos(angle1)
		let y1=200*Math.sin(angle1)
		
		ctx.moveTo(0,0)
		ctx.lineTo(x1,y1)
		
		//左侧斜线
		let angle2=150*Math.PI/180
		let x2=200*Math.cos(angle2)
		let y2=200*Math.sin(angle2)
		
		ctx.moveTo(0,0)
		ctx.lineTo(x2,y2)
		
		
		
		ctx.stroke()

		
	</script>
</html>